<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>马达转速表</title>  
    <style>  
    body{
            margin:0;/* 外边距 */
            height: 100vh; /*浏览器视图高度 */
            /* background-color: #eee; */
            background-image: url('a1.jpg'); /* 替换为你的图片路径 */  
            background-size: cover; /* 背景图覆盖整个区域 */  
            background-repeat: no-repeat; /* 不重复背景图 */  
            background-position: center; /* 背景图位置居中 */  
        }
        canvas {  
            border: 1px solid #ccc;  
            display: block;  
            margin: 0 auto;  
        }  
    </style>  
</head>  
<body>  
    <h1 style="text-align: center;">马达转速表</h1>  
    <canvas id="rpmMeter" width="300" height="300"></canvas>  
    <input type="number" id="rpmInput" placeholder="输入转速" style="display: block; margin: 20px auto; text-align: center;">  
    <button id="updateButton" style="display: block; margin: 0 auto;">更新转速</button>  

    <script>  
        const canvas = document.getElementById('rpmMeter');  
        const ctx = canvas.getContext('2d');  

        function drawRPM(rpm) {  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            ctx.beginPath();  
            ctx.arc(150, 150, 100, 0, 2 * Math.PI);  
            ctx.fillStyle = '#eef';  
            ctx.fill();  
            ctx.stroke();  

            ctx.beginPath();  
            ctx.font = '20px Arial';  
            ctx.textAlign = 'center';  
            ctx.fillStyle = '#000';  
            ctx.fillText('RPM: ' + rpm, 150, 150);  
            
            const angle = (rpm / 6000) * (Math.PI * 2); // 假设最大转速为6000 RPM  
            ctx.beginPath();  
            ctx.moveTo(150, 150);  
            ctx.lineTo(150 + 80 * Math.cos(angle - Math.PI / 2), 150 + 80 * Math.sin(angle - Math.PI / 2));  
            ctx.stroke();  
        }  

        document.getElementById('updateButton').addEventListener('click', function() {  
            const rpmInput = document.getElementById('rpmInput').value;  
            const rpm = Math.max(0, Math.min(6000, rpmInput)); // 限制在0到6000 RPM之间  
            drawRPM(rpm);  
        });  

        // 初始绘制  
        drawRPM(0);  
    </script>  
</body>  
</html>